<template>
	<cover-view class="contentsa">
		<cover-view class="costomheight"></cover-view>
		<cover-view class="tabbar flex a-i-c j-c-a" v-if="tabbarType === '1'">
			<block v-for="(item, index) in tab_list" :key="index">
				<cover-view class="item flex f-d-c a-i-c f-s-20 color-333" @click="changeTabbar(item)">
					<block v-if="item.type === 'text'">
						<block v-if="tabCurrent === item.current">
							<image class="active-icon" :src="item.active" mode=""></image>
						</block>
						<block v-else>
							<image class="icon" :src="item.icon" mode=""></image>
							{{item.name}}
						</block>
					</block>
					<block v-else>
						<cover-view class="add-tabbar-box all-center" @click="showChoosePage">
							<cover-view class="add-tabbar-circle all-center">
								<image class="add-tabbar" :src="item.icon" mode=""></image>
							</cover-view>
						</cover-view>
					</block>
				</cover-view>
			</block>
		</cover-view>
		<cover-view class="tabbar flex a-i-c j-c-a" style="background: rgba(0,0,0,0.684);" v-else>
			<block v-for="(item, index) in tab_list" :key="index">
				<cover-view class="item flex f-d-c a-i-c f-s-20 color-333" @click="changeTabbar(item)">
					<block v-if="item.type === 'text'">
						<block v-if="tabCurrent === item.current">
							<image class="active-icon" :src="item.active" mode=""></image>
						</block>
						<block v-else>
							<image class="icon" :src="item.icon" mode=""></image>
							{{item.name}}
						</block>
					</block>
					<block v-else>
						<cover-view class="add-tabbar-box all-center" style="background: rgba(0,0,0,0.684);" @click="showChoosePage">
							<cover-view class="add-tabbar-circle all-center">
								<image class="add-tabbar" :src="item.icon" mode=""></image>
							</cover-view>
						</cover-view>
					</block>
				</cover-view>
			</block>
		</cover-view>
		<uni-popup type="bottom" ref="choosePage">
			<cover-view class="choose-page-box flex f-d-c a-i-c">
				<cover-view class="page-tab flex j-c-b f-w-w">
					<block v-for="(item, index) in page_tab_list" :key="index">
						<cover-view class="item flex f-d-c a-i-c" @click="goTopageType(item)">
							<image class="icon" :src="item.icon" mode=""></image>
							{{item.title}}
						</cover-view>
					</block>
				</cover-view>
				<image class="close-box" @click="$refs.choosePage.close()" src="@/static/images/tabbar/close-icon.svg" mode=""></image>
			</cover-view>
		</uni-popup>
	</cover-view>
</template>

<script>
	import { goSwitch, goTo } from "@/nav.js";
	import {mapGetters} from "vuex"
	export default {
		name:"index",
		props:{
			tabbarType:{
				type:String,
				default:"1"
			},
		},
		data() {
			return {
				tab_list:[
					{
						name:"首页",
						icon:"/static/images/tabbar/index.svg",
						active:"/static/images/tabbar/index-active.svg",
						url:"/pages/index/index",
						type:"text",
						current:1
					},
					{
						name:"卡友圈",
						icon:"/static/images/tabbar/circle.svg",
						active:"/static/images/tabbar/circle-active.svg",
						url:"/pages/circle/index",
						type:"text",
						current:2
					},
					{
						name:"首页",
						icon:"/static/images/tabbar/add-tabbar.svg",
						active:"/static/images/tabbar/circle-add2.svg",
						url:"/pages/index/index",
						type:"image"
					},
					{
						name:"直播/短视频",
						icon:"/static/images/tabbar/liveandvideo.svg",
						active:"/static/images/tabbar/liveandvideoactive.svg",
						url:"/pages/live/index/index",
						type:"text",
						current:3
					},
					// {
					// 	name:"找车/找货",
					// 	icon:"/static/images/tabbar/car.svg",
					// 	active:"/static/images/tabbar/car-active.svg",
					// 	url:"/pages/findCar/index",
					// 	type:"text",
					// 	current:3
					// },
					{
						name:"我的",
						icon:"/static/images/tabbar/my.svg",
						active:"/static/images/tabbar/my-active.svg",
						url:"/pages/my/index",
						type:"text",
						current:4
					}
				],
				page_tab_list:[
					{
						id:'1',
						title:"找二手车",
						icon:"/static/images/tabbar/esc.svg",
					},
					{
						id:'2',
						title:"卖车",
						icon:"/static/images/tabbar/mc.svg",
					},
					{
						id:'3',
						title:"找货",
						icon:"/static/images/tabbar/zh.svg",
					},
					{
						id:'4',
						title:"找车",
						icon:"/static/images/tabbar/zc.svg",
					},
					{
						id:'5',
						title:"发布卡友圈",
						icon:"/static/images/tabbar/pyq.svg",
					},
					{
						id:'6',
						title:"找工作",
						icon:"/static/images/tabbar/zgz.svg",
					},
					{
						id:'7',
						title:"招聘",
						icon:"/static/images/tabbar/zp.svg",
					},
				]
			};
		},
		computed:{
			...mapGetters(["tabCurrent"])
		},
		methods:{
			goTopageType(item){
				this.$refs.choosePage.close()
				goTo({url:'/pages/pageTab/index?title='+item.title+'&type='+item.id})
			},
			showChoosePage(){
				this.$refs.choosePage.open()
			},
			changeTabbar(item){
				if(item.type === 'text'){
					goSwitch({url:item.url,current:item.current})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.choose-page-box{
		width: 750upx;
		height: 100vh;
		background: rgba(255, 255, 255, 0.79);
		backdrop-filter: blur(64upx);
		position: relative;
		.page-tab{
			width: 100%;
			padding: 0 52upx;
			position: absolute;
			bottom: 614upx;
			.item{
				color: #505050;
				line-height: 34upx;
				width: 25%;
				margin-bottom: 60upx;
				.icon{
					width: 104upx;
					height: 104upx;
					margin-bottom: 24upx;
				}
			}
			&::after{
				content: " ";
				width: 25%;
			}
		}
		.close-box{
			width: 80upx;
			height: 64upx;
			position: absolute;
			bottom: 356upx;
		}
		
	}
	.costomheight{
		height: 168upx;
	}
	.tabbar{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 29;
		background: #FFFFFF;
		.item{
			width: calc(100% / 5);
			transition: all .2s ease-out;
			.add-tabbar-box{
				width: 128upx;
				height: 128upx;
				border-radius: 50%;
				transform: translateY(-30upx);
				background: #FFFFFF;
				.add-tabbar-circle{
					width: 96upx;
					height: 96upx;
					background: linear-gradient(180deg, #0E98E8 0%, #2466F2 100%);
					box-shadow: 0px 10upx 12upx rgba(37, 104, 243, 0.2);
					border-radius: 50%;
					.add-tabbar{
						width: 28upx;
						height: 28upx;
					}
				}
			}
			.active-icon{
				width: 72upx;
				height: 72upx;
			}
			.icon{
				width: 40upx;
				height: 40upx;
				margin-bottom: 4upx;
			}
		}
	}
	.contentsa{
		width: 750upx;
		height: 92upx;
	}
</style>